<template>
    <div class="header">
        登录
    </div>
    <div class="content">
        <div>
            <!--头像-->
            <van-image round width="5rem" height="5rem" style="margin-left: 190px; margin-top: 110px;"
                src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
            <div class="fromcss">
                <van-form @submit="login">
                    <van-cell-group inset>
                        <van-field v-model="userData.username" name="用户名" label="用户名" placeholder="用户名"
                            :rules="[{ required: true, message: '请填写用户名' }]" />
                        <van-field v-model="userData.password" type="password" name="密码" label="密码" placeholder="密码"
                            :rules="[{ required: true, message: '请填写密码' }]" />
                    </van-cell-group>
                    <div style="margin-top: 30px;">
                        <van-button round block type="primary" native-type="submit">
                            登录
                        </van-button>
                    </div>
                </van-form>
            </div>

        </div>
    </div>




    <button @click="login">点击登录</button>
</template>
<script setup>
import axios from 'axios'
import { reactive } from 'vue'
import {useRouter} from 'vue-router'
const router=useRouter()
const userData = reactive({
    username: '',
    password: ''
})


const login = () => { 
    console.log('登录')
    axios.get('http://localhost:8080/login', { params: userData })
        .then((res) => { 
            console.log(res);
            // alert(res.data.msg)
            router.push('/')
        })
}
</script>
<style scoped>
.content{
    width: 100%;
    height: 100vh;
    background-color: #d8d8d8;
}
/* 头部样式 */
.header {
    height: 50px;
    width: 100%;
    background-color: #178d8d;
    font-size: 25px;
    line-height: 50px;
    text-align: center;
    color: white;
    font-weight: 800;
}
.fromcss{
    /* margin-left: 100px;  */
    margin: 20px auto;

    background-color: white;
    width: 80%;
    height: 110px;
    border-radius: 5px;
    }
</style>